<template>
  <div>
    <el-tabs
      v-model="tabActiveName"
      @tab-click="handleClick"
    >
      <template v-for="(item, index) in list" :key="index">
        <el-tab-pane :label="item.title" :name="item.eng_field">
          <!-- 子级 -->
          <div class="tab-sub-box mb20">
            <el-radio-group
              size="default"
              v-model="itemActive"
              @change="setTab"
            >
              <template
                v-for="(items, idx) in tabActiveItem.children"
                :key="idx"
              >
                <el-radio-button :label="items.eng_field">{{
                  items.title
                }}</el-radio-button>
              </template>
            </el-radio-group>
          </div>
        </el-tab-pane>
      </template>
    </el-tabs>
    
    <systemBasicUpdateForm
      ref="systemBasicUpdateFormRef"
    ></systemBasicUpdateForm>
  </div>
</template>
<script lang="ts">
export default {
  name:'systemBasicTypeDefault'
}
</script>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted,nextTick } from "vue";
import type { TabsPaneContext } from "element-plus";

import systemBasicUpdateForm from "./update-form.vue";

const props = withDefaults(defineProps<{
    detail?: any;
    list?: any;
}>(), {
    detail:{},
    list: []
});
const { proxy } = getCurrentInstance() as any;

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const systemBasicUpdateFormRef = ref<HTMLElement>();

const tabActiveName = ref<string>("");

const itemActive = ref<string>("");

const tabActiveItem: any = ref({});

const tabId = ref();

const toInit = () => {
  tabActiveItem.value = props.list[0];
  initActive();
};

const handleClick = (tab:typeof TabsPaneContext, event: Event) => {
  tabActiveItem.value = $utils.getArrayItemByKeyValue(
    props.list,
    "eng_field",
    tab.paneName
  );
  initActive();
}
const setTab = (val: string) => {
  let tabItem = $utils.getArrayItemByKeyValue(
    tabActiveItem.value.children,
    "eng_field",
    val
  );
  tabId.value = tabItem.id || 0;
  initForm();
};

const initActive = () => {
  tabActiveName.value = tabActiveItem.value.eng_field;
  tabId.value = tabActiveItem.value.id;
  if (tabActiveItem.value?.children && tabActiveItem.value?.children.length > 0) {
    itemActive.value = tabActiveItem.value?.children[0]?.eng_field || "";
    tabId.value = tabActiveItem.value?.children[0]?.id;
  }
  initForm();
};

const initForm = () => {
  nextTick(() => {
    proxy?.$refs["systemBasicUpdateFormRef"]?.toInit(tabId.value);
  });
}

onMounted(()=>{
  toInit()
})
</script>
